<template>
    <div>
        <van-popup position="bottom" v-model:show="props.isShow" :style="{ height: '70%',width:'100%' }" @click-overlay="onClickOverlay"  round destroy-on-close>
            <div class="textbook">
                <van-form @submit="onSubmit">
                <van-cell-group inset >
                    <van-field
                    v-model="editions"
                    name="editions"
                    label="版本"
                    placeholder="请填写课文版本，例如：2022人教版"
                    />
                    <van-field
                    v-model="textClass"
                    name="textClass"
                    label="年级"
                    placeholder="请填写年级，例如：一年级"
                    />
                    <van-field
                    v-model="term"
                    name="term"
                    label="学期"
                    placeholder="请填写学期，例如：上册"
                    />
                    <van-field
                    v-model="subject"
                    name="subject"
                    label="科目"
                    placeholder="请填写科目，例如：语文"
                    />
                    <van-field
                    v-model="unit"
                    name="unit"
                    label="单元"
                    placeholder="单元，例如：第一单元"
                    />
                    <van-field
                    v-model="content"
                    name="content"
                    label="内容"
                    placeholder="例如：第一课，语文园地，习作"
                    />
                </van-cell-group>
                <div style="margin: 16px;" >
                    <van-button round block type="primary" native-type="submit">
                    提交
                    </van-button>
                </div>
            </van-form>
            </div>
            
        </van-popup>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import {useBookStore} from '@/stores/bookStore.js';

const editions = ref('');
const textClass = ref('');
const term = ref('');
const subject = ref('');
const unit = ref('');
const content = ref('');

const bookStore = useBookStore();

const emit = defineEmits(['update']);
const onSubmit = (values) => {
    emit('update',values);
    bookStore.setBook({
        book:values
    })
    //console.log(bookStore.book,123456);
};

const props = defineProps({
    isShow: {
      type: Boolean,
      default: false
    }
})

const onClickOverlay = () => {
    emit('update',bookStore.book.book);
}

</script>

<style lang="less" scoped>
.textbook{
    padding: 20px 0px;
}

</style>